﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Mobile.aspx.cs" Inherits="YongHu_UI.Mobile" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
	<title></title>
	<link href="Content/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />	
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Shopin Responsive web template, Bootstrap Web Templates, Flat Web Templates, AndroId Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--theme-style-->
<link href="css/style4.css" rel="stylesheet" type="text/css" media="all" />	
<!--//theme-style-->
<script src="js/jquery.min.js"></script>
<!--- start-rate---->
<script src="js/jstarbox.js"></script>
	<link rel="stylesheet" href="css/jstarbox.css" type="text/css" media="screen" charset="utf-8" />
		<script type="text/javascript">
            jQuery(function () {
                jQuery('.starbox').each(function () {
                    var starbox = jQuery(this);
                    starbox.starbox({
                        average: starbox.attr('data-start-value'),
                        changeable: starbox.hasClass('unchangeable') ? false : starbox.hasClass('clickonce') ? 'once' : true,
                        ghosting: starbox.hasClass('ghosting'),
                        autoUpdateAverage: starbox.hasClass('autoupdate'),
                        buttons: starbox.hasClass('smooth') ? false : starbox.attr('data-button-count') || 5,
                        stars: starbox.attr('data-star-count') || 5
                    }).bind('starbox-value-changed', function (event, value) {
                        if (starbox.hasClass('random')) {
                            var val = Math.random();
                            starbox.next().text(' ' + val);
                            return val;
                        }
                    })
                });
            });
        </script>
<!---//End-rate---->
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <!--header-->
<div class="header">
<div class="container">
		<div class="head">
			<div class=" logo">
				<a href="index.html"><img src="images/logo.png" alt=""></a>	
			</div>
		</div>
	</div>
	<div class="header-top">
		<div class="container">
		<div class="col-sm-5 col-md-offset-2  header-login">
					<ul >
						<li><a href="#">登录</a></li>
						<li><a href="register.aspx">注册</a></li>
						<li><a href="checkout.html"></a></li>
					</ul>
				</div>
				
			<div class="col-sm-5 header-social">		
					<ul >
						<li><a href="#"><i></i></a></li>
						<li><a href="#"><i class="ic1"></i></a></li>
						<li><a href="#"><i class="ic2"></i></a></li>
						<li><a href="#"><i class="ic3"></i></a></li>
						<li><a href="#"><i class="ic4"></i></a></li>
					</ul>
					
			</div>
				<div class="clearfix"> </div>
		</div>
		</div>
		
		<div class="container">
		
			<div class="head-top">
			
		 <div class="col-sm-8 col-md-offset-2 h_menu4">
				<nav class="navbar nav_bottom" role="navigation">
 
 <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header nav_2">
      <button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
     
   </div> 
   <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
        <ul class="nav navbar-nav nav_1">
            <li><a class="color" href="index.aspx">首页</a></li>
			<li class="dropdown mega-dropdown active">
			    <a class="color2" href="product.aspx">服装</a>				
								
			</li>
        </ul>
     </div><!-- /.navbar-collapse -->

</nav>
			</div>
			<div class="col-sm-2 search-right">
				<ul class="heart">
				<li>
				<a href="wishlist.html" >
				<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
				</a></li>
				<li><a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i class="glyphicon glyphicon-search"> </i></a></li>
					</ul>
					<div class="cart box_1">
						<a href="checkout.aspx">
						<h3> <div class="total">
							<span class="simpleCart_total"></span></div>
							<img src="images/cart.png" alt=""/></h3>
						</a>
						<p><a href="javascript:;" class="simpleCart_empty">购物车</a></p>

					</div>
					<div class="clearfix"> </div>
					
						<!----->

						<!---pop-up-box---->					  
			<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
			<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
			<!---//pop-up-box---->
			<div id="small-dialog" class="mfp-hide">
				<div class="search-top">
					<div class="login-search">
						<input type="submit" value="">
						<input type="text" value="Search.." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search..';}">		
					</div>
					<p>Shopin</p>
				</div>				
			</div>
		 <script>
			$(document).ready(function() {
			$('.popup-with-zoom-anim').magnificPopup({
			type: 'inline',
			fixedContentPos: false,
			fixedBgPos: true,
			overflowY: 'auto',
			closeBtnInside: true,
			preloader: false,
			midClick: true,
			removalDelay: 300,
			mainClass: 'my-mfp-zoom-in'
			});
																						
			});
         </script>		
						<!----->
			</div>
			<div class="clearfix"></div>
		</div>	
	</div>	
</div>
			<style type="text/css">
			.contex {
				width: 70%;
				margin-top: 50px;
				background-color: #ececec;
				margin-right:auto;
				margin-left:auto;
				margin-bottom:50px;
			}
			.context2-1 {
				width:400px;
				height: 500px;
				line-height: 50px;
				box-sizing: border-box;
			}
			.context3-1 {
				margin: 50px;
			}
				.cont {
				margin-left:0px;
				}
		</style>
   <div class="contex">
			<div class="context1-1 row">
				<div class="context2-1 col-lg-5 col-sm-5 col-xs-12">
					<div class="context3-1">
						<ul class="nav nav-tabs">
						  <li role="presentation"><a href="Login.aspx?Login=<% = Request.QueryString["Login"] %>" style="color:black">用户名登陆</a></li>

						 <%--<a class="button external" href="Login.aspx?Login=<% = Request.QueryString["Login"] %>" style="color:black;">用户名登陆</a>--%>
						  <li role="presentation" class="active"><a href="#" style="color:black;">手机号登陆</a></li>
						  <%--<a class="button button-active"  style="color:black; background-color: greenyellow" role="presentation" >手机号登陆</a>--%>
						</ul>
						<form>
							<div class="form-group">
								<label for="exampleInputEmail1">手机号</label>
								<div class="item-input">
                                    <asp:TextBox ID="txtMobileNumber" MaxLength="11" TextMode="SingleLine" class="form-control" runat="server" PlaceHolder="请输入手机号码"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="rfvMobileNumber" runat="server" ErrorMessage="手机号码不能为空" ControlToValidate="txtMobileNumber" Display="None"></asp:RequiredFieldValidator>
                                    <asp:RegularExpressionValidator ID="revMobileNumber" runat="server" ErrorMessage="手机号码格式不正确" ControlToValidate="txtMobileNumber" Display="None" ValidationExpression="^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$"></asp:RegularExpressionValidator>
                                </div>
							</div>
							<div class="form-group">
								<label for="exampleInputPassword1">密码</label>
								<div class="item-input">
                                    <asp:TextBox ID="txtPassword" MaxLength="32" TextMode="Password" class="form-control" runat="server" PlaceHolder="请输入密码"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="rfvPassword" runat="server" ErrorMessage="密码不能为空" ControlToValidate="txtPassword" Display="None"></asp:RequiredFieldValidator>
                                </div>
							</div>
                        <asp:Button ID="btnLogin" runat="server" Text="立即登录" CssClass="btn btn-default" OnClick="btnLogin_Click" />
						</form>
                        <div class="cont">
                            <p>登录即代表您同意《用户服务协议》</p>
                            <p>没有账号？<a href="Register.aspx" class="close-login-screen external">现在注册</a></p>
                        </div>
					</div>
				</div>
				<div class="context2-2 col-lg-7 col-sm-7 col-xs-12">
					<img src="images/服装.jpg" style="height:500px" />
				</div>
		</div>
	   </div>

<div class="footer">
	<div class="footer-middle">
				<div class="container">
					<div class="col-md-6 footer-middle-in">
						<a href="index.html"><img src="images/log.png" alt=""></a>
						<p>服装，是衣服鞋装饰品等的总称，多指衣服。在国家标准中对服装的定义为：缝制，穿于人体起保护和装饰作用的产品，又称衣服。
对社会来说，服装已经是遮体、装饰的生活必需品，不仅仅为穿，还是一个身份、一种生活态度、一个展示个人魅力的表现。</p>
					</div>
					
					<div class="col-md-6 footer-middle-in">
						<h6>信息</h6>
						<ul class=" in">
							<li><a href="login.aspx">登录</a></li>
							<li><a href="checkout.aspx">购物车</a></li>
							<li><a href="product.aspx">服装</a></li>
							<li><a data-toggle="modal" data-target=".bs-example-modal-lg1">地图</a></li>
						</ul>
						<div class="clearfix"></div>
					</div>
					<div class="modal fade bs-example-modal-lg1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
		  <div class="modal-dialog modal-lg">
		    <div class="modal-content">
		     <div id="con" style="width:1000px;height:600px;"></div>
		    </div>
		  </div>
		</div>
			</div>
		</div>
 
        </div>
    </form>
</body>
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=5yfkZfiryt58x1ZLaZiXM0HjAjqYd1f5"></script>
					<script>
                        var map = new BMapGL.Map("con");
                        var point = new BMapGL.Point(116.404, 39.915);
                        map.centerAndZoom(point, 15);
                        map.enableScrollWheelZoom(true);

                        //创建地址解析器实例
                        var myGeo = new BMapGL.Geocoder();
                        // 将地址解析结果显示在地图上，并调整地图视野
                        myGeo.getPoint('偃师市中城百货', function (point) {
                            if (point) {
                                map.centerAndZoom(point, 16);
                                map.addOverlay(new BMapGL.Marker(point))
                            }
                        }, '河南省')       // 打开信息窗口  map.getCenter()地图的中心
                    </script>
</html>
